<template>
    <view class="content page">
        <status-bar :title="nameDefinition + '明细'"></status-bar>
        <!-- 返回顶部 -->
        <backTop v-if="toTop"></backTop>

        <u-sticky :customNavHeight="totalHeight">
            <view class="TabBox">
                <u-tabs :list="list1" :current="current" :scrollable="false" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" :lineColor="color" @click="click"></u-tabs>
            </view>
        </u-sticky>

        <view class="brokerage_list">
            <view class="brokerage_item flex-box align-center" v-for="(item, index) in brokerage_list" :key="index">
                <view class="flex-1">
                    <view class="brokerage_t" v-if="item.remarks">{{ item.remarks }}</view>
                    <view class="f_028 c_999999 order_code">{{ item.order_code }}</view>
                    <view class="f_028 c_999999" v-if="item.status == 0">{{ item.add_time }}</view>
                    <view class="f_028 c_999999" v-else>{{ item.pay_time }}</view>
                </view>
                <view v-if="item.status == 0" class="f_036 error-color d-flex f-column a-end">
                    <text>{{ item.money }}</text>
                    <text class="size22 color_99 m-top10">待结算</text>
                </view>
                <view v-if="item.status == 1" class="f_036 success-color flex-box align-center">
                    <text>+</text>
                    <text>{{ item.money }}</text>
                </view>
            </view>
            <emptys v-if="!brokerage_list.length"></emptys>
            <!--  <empty v-if="noData" type="1" cat="3" msg="还没有相关数据哦~"></empty> -->
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    var that;
    export default {
        data() {
            return {
                toTop: false,
                brokerage_list: [],
                noData: false,
                staticUrl: this.staticUrl,
                nameDefinition: uni.getStorageSync('startUp').nameDefinition.profitTitle ? uni.getStorageSync('startUp').nameDefinition.profitTitle : '佣金',
                channel: '',
                type: '', //  类型 不传为全部 1待结算 2已结算 3已退款
                list1: [
                    {
                        name: '全部',
                        type: ''
                    },
                    {
                        name: '待结算',
                        type: 1
                    },
                    {
                        name: '已结算',
                        type: 2
                    },
                    {
                        name: '已退款',
                        type: 3
                    }
                ],
                page: 1,
                pagecount: 20,
                getMore: true,
                current: 0
            };
        },

        onShow() {
            this.getbrokeraget();
            uni.setNavigationBarTitle({
                title: this.nameDefinition + '明细'
            });
        },

        onLoad(e) {
            let that = this;
            if (e.state == 1) {
                that.channel = 2;
            }
        },
        methods: {
            click(e) {
                this.type = e.type;
                this.current = e.index;
                this.init();
            },
            getbrokeraget() {
                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/income_list',
                        data: {
                            channel: this.channel,
                            type: this.type,
                            page: this.page,
                            pagecount: this.pagecount
                        }
                    })
                    .then((res) => {
                        if (res.errcode != '100') return;
                        const result = res.data || [];
                        this.page == 1 ? (this.brokerage_list = result) : (this.brokerage_list = [...this.brokerage_list, ...result]);
                        if (result.length < this.pagecount) this.getMore = false;
                    });
            },

            init() {
                this.page = 1;
                this.getMore = true;
                this.$pop.pageScrollTo();
                this.getbrokeraget();
            }
        },
        onShareAppMessage(option) {
            let shareData = uni.getStorageSync('shareData');
            let vid = uni.getStorageSync('vid');
            return {
                title: shareData.title,
                desc: shareData.desc,
                path: '/pages/index/index?share_v_id=' + vid + '&pageType=99',
                imageUrl: shareData.imageUrl
            };
        },
        onReachBottom() {
            if (!this.getMore) return;
            this.page++;
            this.getbrokeraget();
        },
        computed: {
            ...mapState(['color', 'totalHeight']),
            activeStyle() {
                return {
                    color: this.color,
                    fontSize: '32rpx'
                };
            },
            inactiveStyle() {
                return {
                    color: '#333',
                    fontSize: '32rpx'
                };
            }
        },
        onPageScroll(e) {
            if (e.scrollTop > 200) {
                this.toTop = true;
            } else {
                this.toTop = false;
            }
        }
    };
</script>

<style scoped lang="scss">
    .TabBox {
        width: 100%;
        height: 100rpx;
        background-color: #fff;
    }
    .brokerage_item {
        border-bottom: 1px solid #eeeeee;
        padding: 20rpx 30rpx;
        background: #ffffff;
        justify-content: space-between;
        .order_code {
            margin-bottom: 10rpx;
        }
        .brokerage_t {
            margin-bottom: 12rpx;
            font-size: 32upx;
        }
        .f_036 {
            text {
                font-size: 36rpx;
                vertical-align: middle;
                margin-right: 4rpx;
            }
        }
    }
    .empty {
        color: red;
    }
</style>
